<template>
  <h1>响应式数据</h1>

  <input v-model="name1" /> <br />

  {{name1}}

  {{name2.name}}

  <br />

  <son1 :name="name" :age="age"></son1><br />

  <!-- <son2 SubData="hello son"></son2> -->
  <son2 @SubClick="SubClick"></son2>
</template>

<script>
  //定义响应式数据
  import {ref, reactive} from 'vue'

  //引入组件
  import son1 from './son1.vue'
  import son2 from './son2.vue'

  export default {
    name: 'Vue3Index',
    emits: ['toggle'], //定义说明父组件的自定义事件
    created()
    {
      this.$emit('toggle', false);

      // console.log(this.demo)
    },
    data()
    {
      return {
        demo: 'hello world'
      }
    },
    //生命周期函数
    setup(props, context)
    {
      console.log('setup 函数')

      //父与子 用属性
      //子与父 用事件
      // console.log(props)
      // console.log(context)

      let nameStr = 'hello world'

      //创建一个响应式变量
      let name1 = ref(nameStr)

      //ref 在获取和修改的时候需要添加上 value
      setTimeout(() => {
        // console.log(name1.value)

        name1.value = 'hello demo'
      }, 2000)

      let nameObj = {name:'张三'}

      const name2 = reactive(nameObj)

      console.log(name2.name)


      /////////
      var name = ref('张三')
      var age = ref(20)

      function SubClick(son)
      {
        console.log('传过来的数据' +son.value)
      }



      return {
        name1,
        name2,
        name,
        age,
        SubClick,
      }

    },
    components: {
      son1,
      son2
    }
  }
</script>